<!--
 * @author: pwz（潘文周）
 * @description: 多屏联动
-->
<template>
  <div class="mutiScreen-content">
    <div
      @click="show = !show"
      class="isDisplay"
      :style="!show ? 'top:97%;' : ''"
    ></div>
    <ag-popup
      v-model="visible"
      @onCancel="onCancel"
      class="mutiScreen-popbox"
      v-show="show"
    >
      <el-row class="grid-content">
        <el-col :span="7"><div>主屏透明度:</div></el-col>
        <el-col :span="14">
          <el-slider
            :min="0"
            :max="100"
            v-model="inputValue"
            @input="changeOpacity"
          />
        </el-col>
      </el-row>
      <el-row class="grid-content">
        <el-col :span="7">
          <div>互动模式:</div>
        </el-col>
        <el-col :span="14">
          <el-switch
            style="display: block"
            v-model="linkageType"
            active-color="#409eff"
            inactive-color="#409eff"
            active-text="联动模式"
            inactive-text="卷帘模式"
            active-value="copy"
            inactive-value="roll"
            class="switch-model"
          >
          </el-switch>
        </el-col>
      </el-row>
      <el-row class="grid-function">
        <el-col :span="8">
          <div style="width: 10px; height: 1px"></div>
          <div class="grid-func-name" v-show="linkageType == 'copy'">
            位置标示
          </div>
          <el-switch
            style="display: inline-block"
            v-model="showPostionLabel"
            v-show="linkageType == 'copy'"
          ></el-switch>
        </el-col>
        <el-col :span="8" v-show="linkageType == 'copy'">
          左右屏切换<i class="change-icon" @click="switchScreen"></i>
        </el-col>
        <el-col :span="8">
          <el-popover placement="right-end" width="330" trigger="click">
            <div class="content-baselayer ag-scrollbar">
              <BaseLayerSwitcher ref="baseLayerSwitcher"></BaseLayerSwitcher>
            </div>
            <div slot="reference">
              <span style="margin-right: 10px">分屏底图切换</span>
              <i class="basemap-change-icon"></i>
            </div>
          </el-popover>
        </el-col>
      </el-row>
      <!-- <div id="mapContainer" class="hideBar">
      <div>
        <p style="margin-bottom: 18px">
          通过设置显示方式和功能交互，对比分屏情况下二三维数据联动展示效果。
        </p>
        <div style="margin-bottom: 20px">
          屏幕联动方式：
          <a-select v-model="linkageType" @change="selectLinkageType">
            <a-select-option value="copy"> 双屏 </a-select-option>
            <a-select-option value="roll"> 卷帘 </a-select-option>
          </a-select>
        </div>
        <div>
          透明度：
          <a-slider
            v-model="inputValue"
            :min="0"
            :max="100"
            @change="changeOpacity"
          />
        </div>
        <div>
          <a-checkbox
            v-model="showPostionLabel"
            v-show="linkageType == 'copy'"
            style="margin: 15px 0 15px; color: white"
          >
            位置标志
          </a-checkbox>
        </div>
        <div class="content-baselayer">
          <BaseLayerSwitcher ref="baseLayerSwitcher"></BaseLayerSwitcher>
        </div>
      </div>
    </div> -->
    </ag-popup>
    <div id="mapContainer" class="hideBar"></div>
  </div>
</template>
<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
import bus from "@/views/js/utils/bus";
import Linkage from "./js/Linkage";
import mouse_png from "./img/mouse.png";
import BaseLayerSwitcher from "./BaseLayerSwitcher/index";
let secondViewer, linkage;
export default {
  components: {
    "ag-popup": AgPopup,
    BaseLayerSwitcher,
  },
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      visible: true,
      showPostionLabel: false,
      linkageType: "copy",
      inputValue: 100,
      show: true, //是否显示弹出框
      switchScreenFlag: false,
    };
  },
  mounted() {
    this.createView();
  },
  watch: {
    showPostionLabel(nv) {
      if (nv) {
        //设置位置标记
        linkage.setPositionLabel({
          billboard: {
            //image: "./img/widgets/MultiScreenLinkage/mouse.png",
            image: mouse_png,
            pixelOffset: new Cesium.Cartesian2(5, 5),
          },
        });
      } else {
        linkage.setPositionLabel();
      }
    },
    linkageType(data) {
      this.selectLinkageType(data);
    },
  },
  methods: {
    async createView() {
      $(".map").addClass("linkage");
      //创建二号cesium地图
      secondViewer = agcim.scene.sceneViewer.createViewer(
        "map",
        agcim.scene.sceneViewer.getViewerParam()
      );
      secondViewer.scene.requestRenderMode = false;
      secondViewer.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.WHEEL,
        Cesium.CameraEventType.PINCH,
      ];
      secondViewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.PINCH,
        Cesium.CameraEventType.RIGHT_DRAG,
      ];
      // var url = "";
      // // 从微件扩展字段读取服务链接
      // await agcim.widgets.widgetExtendField
      //   .getWidgetInfoByCode("agcim-multiScreenLinkage")
      //   .then(function (res) {
      //     url = JSON.parse(res?.content?.widgetLevelsData)
      //       ? JSON.parse(res?.content?.widgetLevelsData)[0]?.gzMap
      //       : "https://agcimdev.gzcc.gov.cn/server/rest/services/Hosted/GZSDZDT_ZJ_GZ2000_20211130/MapServer";
      //   });
      // var layer = new agcim.layer.AgArcGISLayer(secondViewer);
      // layer.addMapServer(url);
      CIM.secondViewer = secondViewer;
      bus.emit("initSplitScreenLayerTree", CIM.secondViewer);
      this.$refs.baseLayerSwitcher.changeViewer(secondViewer);
      //TODO:将副屏的场景对象绑定到CIM对象，给副屏的底图组件使用
      linkage = new Linkage(
        CIM.viewer,
        secondViewer,
        document.getElementById("mapContainer"),
        $("#slider")[0]
        // document.getElementById("slider")
      );
      this.setModel(Linkage.MODEL_TYPE.SPLIT_SCREEN);
    },
    setModel(model) {
      switch (model) {
        case Linkage.MODEL_TYPE.SPLIT_SCREEN:
          //原始屏幕宽度减半
          linkage.setModel(model);
          //设置位置标记
          // this.showPostionLabel = true;
          break;
        case Linkage.MODEL_TYPE.ROLL:
          this.showPostionLabel = false;
          this.switchScreenFlag = true;
          this.switchScreen();
          //原始屏幕和新div重叠，原始div上增加一个滚动条
          linkage.setModel(model);
          break;
      }
    },
    selectLinkageType(model) {
      switch (model) {
        case "copy":
          this.setModel(Linkage.MODEL_TYPE.SPLIT_SCREEN);
          break;
        case "roll":
          this.setModel(Linkage.MODEL_TYPE.ROLL);
          break;
      }
    },
    onCancel() {
      this.visible = false;
      this.$emit("close", { code: "MultiScreenLinkage" });
    },
    changeOpacity(value) {
      $("#containCesium").css("opacity", value / 100);
    },
    switchScreen() {
      if (!this.switchScreenFlag) {
        // secondViewer._container.style.left = "50%";
        document.getElementById("containCesium").parentElement.style.left =
          "50%";
        document.getElementById("map").style.left = "0%";
        this.switchScreenFlag = true;
      } else {
        // secondViewer._container.style.left = "0%";
        document.getElementById("containCesium").parentElement.style.left =
          "0%";
        document.getElementById("map").style.left = "50%";
        this.switchScreenFlag = false;
      }
    },
    resetDom() {
      document.getElementById("containCesium").parentElement.style.left = "0";
      document.getElementById("containCesium").parentElement.style.width =
        "100%";
      document.getElementById("map").style.left = "0%";
    },
  },
  beforeDestroy() {
    $(".map").removeClass("linkage");
    this.resetDom();
    linkage.clear();
    bus.emit("clearSplitScreenIcon");
  },
};
</script>
<style scoped>
#mapContainer {
  position: absolute;
  /* right: 0;
  top: 0; */
  overflow: hidden;
  height: 100%;
}

#map {
  position: absolute;
  height: 100%;
  width: 100%;
}

#slider {
  position: fixed;
  left: 0;
  width: 8px;
  height: 100%;
  border-radius: 0 3px 3px 0px;
  background: rgb(81, 61, 192);
  z-index: 99;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.2;
}

#slider:hover {
  opacity: 0.8;
  cursor: ew-resize;
}

.popup-screen {
  width: 400px;
  height: 550px;
  /* overflow-y: auto; */
}
.content-baselayer {
  height: 450px;
  overflow-y: auto;
}
/* 样式新增 */
.mutiScreen-popbox {
  width: 450px;
  height: 180px;
  top: 80% !important;
  left: 50% !important;
  transform: translate(-50%, 0);
}
.switch-model ::v-deep.el-switch__label.is-active {
  color: #409eff;
  opacity: 1;
}
.switch-model ::v-deep.el-switch__label {
  color: #fff;
  opacity: 0.6;
  height: 38px;
  line-height: 38px;
}
.grid-content {
  height: 48px;
  font-size: 14px;
}
.grid-content .el-col-7 > div {
  text-align: right;
  margin-right: 20px;
  line-height: 38px;
}
.grid-content .el-switch__core {
  vertical-align: bottom;
}
.grid-function .el-col-7 {
  text-align: center;
  cursor: pointer;
  position: relative;
}
.grid-function .el-col-8 {
  text-align: center;
  cursor: pointer;
  position: relative;
}
/* .grid-function .el-col-8:hover {
  color: #409eff;
} */
.grid-function {
  height: 48px;
  line-height: 48px;
  border-top: 1px solid #dcdfe6;
  margin: 0 36px;
}
.grid-function .grid-func-name {
  margin-right: 4px;
  display: inline-block;
}
.grid-function .el-switch {
  vertical-align: baseline;
}
.mutiScreen-popbox ::v-deep.ag-pop-box-unique-head {
  height: 30px;
  border-bottom: 0;
}
.mutiScreen-popbox ::v-deep.ag-pop-box-unique-head .ag-pop-box-unique-close {
  top: 10px;
}
.isDisplay {
  position: fixed;
  top: 78%;
  left: 48.9%;
  width: 100px;
  height: 20px;
  cursor: pointer;
  border-style: solid;
  border-width: 0px 20px 20px 20px;
  border-color: transparent transparent rgba(1, 10, 23, 0.8) transparent;
  width: 0px;
  height: 0px;
}
.change-icon {
  position: absolute;
  background: url("./img/change.png") center no-repeat;
  background-size: 76%;
  top: 0;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  margin: auto;
}
.grid-function .el-col-8:hover .change-icon {
  background-color: rgba(30, 144, 255, 0.3);
  border-radius: 2px;
}
.basemap-change-icon {
  position: absolute;
  background: url("./img/basemap-change.png") center center no-repeat;
  background-size: 76%;
  top: 0;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  margin: auto;
}
.grid-function .el-col-8:hover .basemap-change-icon {
  background-color: rgba(30, 144, 255, 0.3);
  border-radius: 2px;
}

/* .content-ba */
</style>
